<template>
	<div class="box">
		<!-- 返回按钮 -->
		<div class="top">
			<p class="back" @click="back()">
				<返回 </p>
		</div>
		<!-- 消息列表 -->
		<div class="content">
			<div class="message">
				消息
			</div>
			<div class="list">
				<template v-for="item in listData" :key="item.id">
					<div class="item">
						<div>
							{{ item.title }}
						</div>
						<div>
							{{ item.content }}
						</div>
						<div>
							{{ item.time }}
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import useJump from "@/utils/jump";

const { back } = useJump();
// 消息数据
const listData = ref([
	{
		id: 1,
		title: '充值成功！',
		content: '您已成功充值10000.00TRX，感谢您的合作和信任',
		time: '2024-12-20 17:22:56'
	},
	{
		id: 2,
		title: '系统通知！',
		content: '我们已经检测到一个新的登录到您的HTX帐户从一个新的IP地址。登录详情如下：时间：2025-01-04 11:04（UTC）IP地址：27.38.200.218位置：中国广东深圳设备：Windows 10 Chrome 12如果这不是你，请删除此设备导航到设置》安全》检查安全历史记录》登录状态，并联系我们的客户服务，以保护您的资产。',
		time: '2024-12-20 17:22:56'
	},
	{
		id: 3,
		title: '系统通知！',
		content: '我们已经检测到一个新的登录到您的HTX帐户从一个新的IP地址。登录详情如下：时间：2025-01-04 11:04（UTC）IP地址：27.38.200.218位置：中国广东深圳设备：Windows 10 Chrome 12如果这不是你，请删除此设备导航到设置》安全》检查安全历史记录》登录状态，并联系我们的客户服务，以保护您的资产。',
		time: '2024-12-20 17:22:56'
	}
])
</script>
<style lang="scss" scoped>
.box {
	margin-top: 5vh;
	margin-bottom: 5vh;

	.top {
		display: flex;
		align-items: center;
		justify-content: start;
		font-size: 14px;
		color: #114CEE;
	}

	.content {
		.message {
			height: 47px;
			// width: 73px;
			margin: 4vh 0;
			font-family: "Microsoft YaHei", "Microsoft YaHei";
			font-size: 36px;
			font-style: normal;
			font-weight: bold;
			line-height: 60px;
			color: #000;
			// letter-spacing: 22px;
			text-align: left;
		}

		.list {
			height: 70vh;
			overflow-y: auto;
			scrollbar-width: none;

			/* Firefox */
			-ms-overflow-style: none;

			/* IE 10+ */

			/* 隐藏滚动条（适用于Chrome/Safari） */
			.scrollable-content::-webkit-scrollbar {
				display: none;

				/* 隐藏滚动条 */
			}

			/* 隐藏滚动条（适用于Firefox） */
			.scrollable-content {
				scrollbar-width: none;

				/* 隐藏滚动条 */
			}
		}

		.item {
			margin: 0 0 20px;
			border-bottom: 1px solid #E5E6EB;

			>div {
				padding-bottom: 20px;
			}

			>div:nth-child(1) {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 18px;
				font-weight: bold;
				color: #000;
				text-align: left;
			}

			>div:nth-child(2) {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #000;
			}

			>div:nth-child(3) {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #86909C;
			}
		}
	}
}</style>
